<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div th:include="pages :: header"></div>
<div style="display: table; margin-right: auto; margin-left: auto;">
    <h1>Hi! <span th:text="${user.getUsername()}"></span>! Welcome to the online bank!</h1>
    <br>
    <label align="center"><a th:href="@{/registerNewCard}">Register a new card</a> </label>
    <div th:if="${cards}" align="center">
        <!--<p><span>Card number</span>&nbsp;&nbsp;<span>Balance</span></p>
        <ul th:each="card:${cards}">
            <li>
                <span th:text="${card.getCardNumber()}"></span>&nbsp;&nbsp;
                <span th:text="${card.getBalance()}"></span>&nbsp;
                <label><a th:href="@{/deposit/{cardNumber}(cardNumber=${card.getCardNumber()})}">Deposit</a></label>
            </li>
        </ul>-->
        <table align="center">
            <tr>
                <th style="border: 1px ;">Card</th>
                <th style="border: none;"></th>
                <th style="border: 1px ;">Balance</th>
                <th></th>
            </tr>
            <tr th:each="card:${cards}">
                <td style="border: 1px ;" th:text="${card.getCardNumber()}"></td>
                <td style="border: none;"></td>
                <td style="border: 1px ;" th:text="${card.getBalance()}"></td>
                <td><a th:href="@{/deposit/{cardNumber}(cardNumber=${card.getCardNumber()})}">Deposit</a></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>